<template>
	<view class="apply-container">
		<view class="content">
			<view class="shop-cont flexWrapNo">
				<image :src="details.image" class="shop-img"></image>
				<view class="shop-info-box flexWarpColumn">
					<view class="info-box">
						<view>{{details.title||'--'}}</view>
						<!-- <view class="specs-box">颜色:蓝色,码数:38 , x1</view> -->
						<view class="specs-box flexWrapNo" v-if="details.spec&&details.spec.length>0">
							<text v-for="(val,i) in details.spec" :key="i">
								{{val.spec}}:{{val.specValue}},
							</text>
							x{{details.nums}}
						</view>
						<view class="specs-box" v-else>
							默认,x{{details.nums}}
						</view>
					</view>
					<view class="price">
						<text class="symbol">¥</text>{{details.price}}
					</view>
				</view>
				<!-- <view class="ststus-box flexWarpColumn">
					<view class="status yellow">待商家处理</view>
					<view class="status yellow">￥38.99</view>
				</view> -->
			</view>
			<view class="after-sale-type">
				<view class="title">请选择售后类型:</view>
				<view class="type-box flexWrapNo">
					<text :class="{active:refundType==1}" @tap="chooseType(1)">仅退款</text>
					<text :class="{active:refundType==2}" @tap="chooseType(2)">退货退款</text>
				</view>
				<view class="tips-box">已收到货请选择退货退款</view>
			</view>
			
			<view class="input-item flexWrap" @tap="refundReasonFlag=true">
				<view class="label">退款原因</view>
				<view class="flexWrapNo">
					<view class="value" v-if="refundReason">{{refundReason}}</view>
					<view class="placeholderClass" v-else>请选择</view>
					<text class="icon-more"></text>
				</view>
			</view>	
			<view class="input-item flexWrap">
				<view class="label">退款金额</view>
				<view class="flexWarpColumn" style="align-items: flex-end;">
					<view class="money flexWrapNo">￥<input type="text" v-model="refundMoney" /></view>
					<view class="max">最多 ￥{{details.realprice}}</view>
				</view>
			</view>
			<view class="input-item">
				<view class="label">退款说明</view>
				<textarea placeholder-style="color:rgba(255,255,255,0.5)" placeholder="请描述具体问题，有助于处理售后问题" v-model="refundInstructions"/>
			</view>
			<view class="certificate-box">
				<view class="label">凭证</view>
				<view class="upload-box">
					<view class="file-item" v-for="(item,index) in fileList" :key="index">
						<block v-if="isVideoOrImage(item.url) == 'video'">
							<video :src="item.url" object-fit="cover" class="img" ></video>
							<image src="/static/user/close.png" class="img-del" @tap="delVideo(index)"></image>
						</block>
						<block v-else>
							<image :src="item.url" class="img" @tap.stop="previewImage(item)" mode="aspectFill"></image>
							<image src="/static/user/close.png" class="img-del" @tap="delImage(index)"></image>
						</block>
					</view>
					<view v-if="fileList.length<5" class="flexWrapNo upload-add" @tap="chooseFile">
						<uni-icons type="camera" size="26" color="rgba(255,255,255,0.8)"></uni-icons>
					</view>
				</view>
				<view class="tips-box">上传视频或图片最多5张</view>
			</view>
			
			<view class="bottom-box btns flexWrapNo">
				<view class="grey-btn" @tap="openCustomerServiceChat()">联系客服</view>
				<view class="blue-btn" @tap="submit">提交申请</view>
			</view>
			
			<view class="certificate-pupup" v-if="certificateFlag">
				<view @tap="chooseImage()">图片</view>
				<view @tap="chooseVideo()">视频</view>
				<view class="cancel-btn" @tap="certificateFlag=false">取消</view>
			</view>	
			
			<!-- 退款原因弹窗 -->
			<view class="refundReason-popup" v-if="refundReasonFlag">
				<image src="/static/user/close.png" class="close-btn" @tap="closePopup()"></image>
				<view class="title">选择退款原因</view>
				<view class="reason-list">
					<view class="reason-item flexWrap" v-for="(item,index) in refundReasonList" :key="index" @tap="chooseReason(item)">
						<view class="reason">{{item.reasons}}</view>
						<image src="/static/user/select-icon.png" mode="" v-if="item.id==refundReasonId"></image>
						<image src="/static/order/notselect-icon.png" mode="" v-else></image>
					</view>
				</view>
				<view class="sure-btn" @tap="sure">确定</view>
			</view>
			<view class="mask-wrap" v-if="certificateFlag||refundReasonFlag"></view>
		</view>
	</view>
</template>

<script>
	import base from '@/common/base.js';
	export default{
		data(){
			return{
				orderId:'',
				orderGoodsId:'',
				aftersalesId:'',  // 售后id
				details:{},  // 详情
				refundType:1,  // 1:仅退款  2：退货退款
				refundReasonId:'', // 退款原因id
				refundReason:'', // 退款原因
				refundMoney:0,
				refundInstructions:'', // 退款说明
				certificateFlag:false,
				limit:5,
				fileList:[],
				refundReasonFlag:false,
				refundReasonList:[],
				customerUrl:"",
				corpId:""
			}
		},
		onLoad(ops) {
			this.orderId=ops.orderId
			this.orderGoodsId=ops.orderGoodsId
			this.aftersalesId=ops.aftersalesId
			console.log(this.aftersalesId,"opsipsopsospospsopsops")
			if(this.aftersalesId){
				this.getSalesDetails()
			}
			this.getBugDeatils()
			this.getReasonList()
			this.getCustomerInfo()
		},
		methods:{
			getCustomerInfo() {
				this.$request.post(this.$api.getCompaniesWeChatKfUrl, {
				}, {
					isJava: true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code == 200) {
						this.customerUrl = data.customerUrl
						this.corpId = data.enterpriseId
					}
				})
			},
			
			// 联系客服
			openCustomerServiceChat() {
				let that = this
				wx.openCustomerServiceChat({
					extInfo: {
						url: that.customerUrl
					},
					corpId: that.corpId,
					success(res) {
						
					},
					complete(com) {
						
					}
				})
			},
			// 获取购买详情
			getBugDeatils(){
				this.$request.get(this.$api.orderBuyDetails, {
					orderId:this.orderId,
					orderGoodsId:this.orderGoodsId
				}, {
					isJava:true
				}).then(res => {
					if (res.code == 200) {
						let {
							data = {}
						} = res;
						this.details=data
						this.refundMoney=this.details.realprice
					}
				})
			},
			
			// 获取退款原因
			getReasonList(){
				this.$request.post(this.$api.reasonsList, {
				}, {
					isJava:true
				}).then(res => {
					if (res.code == 200) {
						let {
							data = {}
						} = res;
						this.refundReasonList=data
					}
				})
			},
			
			// 获取售后详情
			getSalesDetails(){
				this.$request.post(this.$api.salesDetails, {
					aftersalesId:this.aftersalesId
				}, {
					isJava:true
				}).then(res => {
					if (res.code == 200) {
						let {
							data = {}
						} = res;
						this.refundType=data.type
						this.refundReasonId=data.reasonsId
						this.refundReason=data.reason
						this.refundInstructions=data.refundInstructions
						this.fileList=data.photos
					}
				})
			},
			
			// 选择退款类型
			chooseType(val){
				this.refundType=val
			},
			
			// 选择退款原因
			chooseReason(item){
				this.refundReasonId=item.id
				this.refundReason=item.reasons
			},
			
			closePopup(){
				this.refundReasonFlag=false
			},
			
			sure(){
				this.closePopup()
			},
			
			// formatReason(val){
			// 	const data = this.refundReasonList.find((obj) => obj.value === val)
			// 	return data.label||''
			// },
			
			// 判断是视频还是图片
			isVideoOrImage(file) {
				let videoRegex = /(\mp4|\avi|\mkv)$/i
			    let imgRegex = /(\jpg|\jpeg|\png|\gif|\webp)$/i
				if (imgRegex.test(file)) {
					return 'image'
				} else if (videoRegex.test(file)) {
					return 'video'
				} else {
					return 'unknown'
				}
			},
			chooseFile() {
				this.certificateFlag=true
			},
			
			chooseVideo() {
				var that = this
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function(res) {
						let httpsHead = 'https://moyu24h-new.oss-cn-chengdu.aliyuncs.com/'
						that.$tools.loadIng('上传中,请稍后..')
						let video_url = res.tempFilePath
						base.aliyun_upload(video_url, function(r, err) {
							if (r) {
								console.log(httpsHead+r)
								that.video_url = httpsHead+r
								that.fileList = that.fileList.concat({url:that.video_url})
								uni.hideLoading();
							}
						}, function(res) {
							// console.log(res);
						}, 'mp4', 'video/')
					}
				});
				this.certificateFlag=false
			},
			
			chooseImage: async function() {
				var that = this
				uni.chooseImage({
					count: that.limit - that.fileList.length,
					extension: ['.jpg', '.png', '.jpeg'],
					success: (res) => {
						console.log(res)
						for (let i in res.tempFilePaths) {
							var imgFiles = res.tempFilePaths[i]
							let suffix = res.tempFilePaths[i].split('.')[1]
							console.log(suffix)
							if (suffix != 'jpg' && suffix != 'png' && suffix != 'jpeg') {
								that.$tools.showToast('图片仅支持jpg、jpeg、png');
								return;
							}
							that.cutImageCallback(imgFiles);
						}
						
						// that.imageList = that.imageList.concat(res.tempFilePaths)
					}
				})
				this.certificateFlag=false
			},
			
			cutImageCallback(content) {
				let that = this;
				let httpsHead = 'https://moyu24h-new.oss-cn-chengdu.aliyuncs.com/'
				that.$tools.loadIng('上传中,请稍后..')
				base.aliyun_upload(content, function(r, err) {
					if (r) {
						let uploadimg = httpsHead + r
						console.log(r)
						that.fileList = that.fileList.concat({url:uploadimg});
						uni.hideLoading();	
					}
				})	
			},
			delVideo(index) {
				this.fileList.splice(index, 1)
			},
			delImage(index) {
				this.fileList.splice(index, 1)
			},
			
			// 提交售后申请
			submit(){
				if(!this.refundReason){
					this.$tools.showToast('请选择退款原因')
					return
				}else if(!this.refundMoney){
					this.$tools.showToast('请填写退款金额')
					return
				}
				if(this.refundMoney>this.details.realprice){
					this.$tools.showToast('退款金额不能超过实付金额')
					return
				}
				let arr=[]
				this.fileList.forEach((item,i)=>{
					arr.push({
						id:item.id||'',
						aftersalesId:item.aftersalesId||'',
						type:1,
						url:item.url,
					})
				})
						
				this.$request.post(this.$api.salesSaveOrUpdate, {
					id:this.aftersalesId||'',
					goodsSkuId:this.details.goodsSkuId,
					orderId:this.details.orderId,
					orderGoodsId:this.details.orderGoodsId,
					type:this.refundType,
					nums:this.details.nums,
					realprice:this.details.realprice,
					refund:this.refundMoney,
					reasonsId:this.refundReasonId,
					reason:this.refundReason,
					refundInstructions:this.refundInstructions,
					photos:arr,
					userType:1,
				}, {
					isJava:true
				}).then(res => {
					if (res.code == 200) {
						let {
							data = {}
						} = res;
						this.$tools.showToast('提交成功')
						setTimeout(()=>{
							let pages = getCurrentPages(); //当前页
							let beforePage = pages[pages.length - 2]; //上个页面
							if(this.aftersalesId){
								beforePage.$vm.getSalesDetails()
							}else{
								beforePage.$vm.getOrderInfo();
							}
							uni.navigateBack({delta:1})
						},1200)
					}
				})	
			},
		},
	}
</script>

<style lang="scss" scoped>
	.apply-container{
		padding: 28rpx;
	}
	.content{
		background: #1D1C5C;
		border-radius: 24rpx;
		padding: 28rpx;
	}
	.shop-cont{
		gap: 14rpx;
		align-items: flex-start;
		.shop-img{
			width: 168rpx;
			height: 168rpx;
			border-radius: 6rpx;
			flex: none;
		}
		.shop-info-box{
			font-size: 28rpx;
			color:#FFFFFF;
			height: 168rpx;
			justify-content: space-between;
			flex: 1;
			.info-box{
				.specs-box{
					font-size: 24rpx;
					color: rgba(255,255,255,0.8);
					margin-top: 8upx;
					gap: 14rpx;
				}
			}
			.price{
				font-weight: bold;
				font-size: 24rpx;
				.symbol{
					font-size: 20rpx;
					margin-right: 6rpx;
					font-weight: unset;
				}
			}
		}
		.ststus-box{
			align-items: flex-end;
			gap: 8rpx;
			.status{
				font-weight: 500;
				font-size: 26rpx;
				color: rgba(255,255,255,0.5);
			}
			.yellow{
				color:#FFAA00;
			}
		}
	}
	
	.after-sale-type{
		margin-top: 24rpx;
		.title{
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}
		.type-box{
			margin-top: 14rpx;
			gap: 14rpx;
			text{
				width: 120rpx;
				height: 48rpx;
				border-radius: 6rpx;
				border: 1rpx solid rgba(255,255,255,0.8);
				font-size: 24rpx;
				color: rgba(255,255,255,0.8);
				text-align: center;
				line-height: 48rpx;
				// padding: 0 16rpx;
			}
			.active{
				color: #26BCFD;
				border: 1rpx solid #26BCFD;
			}
		}
		.tips-box{
			margin-top: 12rpx;
			font-size: 24rpx;
			color: rgba(255,255,255,0.5);
		}
	}
	.input-item{
		padding: 20rpx 0;
		font-size: 24rpx;
		color: #FFFFFF;
		border-bottom: 1rpx solid rgba(255,255,255,0.1);
		.label{
			font-weight: 500;
			font-size: 28rpx;
		}
		.placeholderClass{
			color: rgba(255,255,255,0.5);
		}
		.icon-more{
			border-color: rgba(255,255,255,0.5);
			flex-shrink: 0;
		}
		.money{
			input{
				width: 80rpx;	
			}
		}
		.max{
			color: rgba(255,255,255,0.5);
			font-size: 20rpx;
		}
		textarea{
			margin-top: 16rpx;
			height: 60rpx;
		}
	}
	.certificate-box{
		margin-top: 20rpx;
		.label{
			color: #FFFFFF;
			font-weight: 500;
			font-size: 28rpx;
		}
		.upload-box {
			margin-top: 14rpx;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;
			.file-item {
				width: 132rpx;
				height: 132rpx;
				position: relative;
				.img {
					display: block;
					width: 100%;
					height: 100%;
				}
				.img-del {
					position: absolute;
					top: -10upx;	
					right: -10upx;
					width: 40upx;
					height: 40upx;
				}
			}
		
			.upload-add {
				width: 132rpx;
				height: 132rpx;
				border-radius: 6rpx;
				border: 1rpx solid rgba(255,255,255,0.8);
				justify-content: center;
			}
		}
		.tips-box{
			margin-top: 12rpx;
			font-size: 24rpx;
			color: rgba(255,255,255,0.5);
		}
	}
	
	.bottom-box{
		height: 184rpx;
		border-top: 1rpx solid #232428;
		background: #1D1C5C;
		padding: 26rpx 40rpx 40rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		align-items: flex-start;
		justify-content: flex-end;
		gap: 10rpx;
		.grey-btn{
			width: 168rpx;
			height: 72rpx;
			background: #26BCFD;
			border-radius: 36rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 72rpx;
			text-align: center;
		}
		.blue-btn{
			width: 168rpx;
			height: 72rpx;
			background: #26BCFD;
			border-radius: 40rpx;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 72rpx;
			text-align: center;
		}
	}
	
	.certificate-pupup{
		width: 100%;
		background: #1D1C5C;
		border-radius: 24rpx;
		padding: 30rpx 0;
		position: fixed;
		left: 0;
		bottom:0;
		z-index: 1000;
		view{
			font-weight: 500;
			font-size: 34rpx;
			color: #FFFFFF;
			padding: 30rpx;
			text-align: center;
			&:first-child{
				border-bottom: 1rpx solid rgba(255,255,255,0.1);
			}
		}
		.cancel-btn{
			border-top: 10rpx solid rgba(255,255,255,0.05);
		}
	}
	
	.refundReason-popup{
		width: 100%;
		background: #1D1C5C;
		border-radius: 24rpx;
		padding: 40rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom:0;
		z-index: 1000;
		.title{
			font-weight: 500;
			font-size: 34rpx;
			color: #FFFFFF;
			text-align: center;
		}
		.close-btn {
			width: 52upx;
			height: 52upx;
			position: absolute;
			top: 28upx;
			right: 28upx;
		}
		.reason-list{
			margin-top: 24rpx;
			.reason-item{
				padding: 24rpx 0;
				border-bottom: 1rpx solid rgba(255,255,255,0.1);
				.reason{
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}
				image{
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
				}
			}
		}
		.sure-btn{
			height: 96rpx;
			background: linear-gradient( 90deg, #598FFF 0%, #2662DE 100%);
			border-radius: 48rpx;
			line-height: 96rpx;
			font-weight: 500;
			font-size: 34rpx;
			color: #FFFFFF;
			text-align: center;
			margin: 40rpx 0 22rpx 0;
		}
	}
</style>